<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2> {{title}} </h2>
        <myhead></myhead>
        <hr>
        <odiv></odiv>
        <my-box></my-box>
        <main-box></main-box>
        <Test></Test>

        <!-- <my-menu></my-menu> -->

        <div class="" id="menu"></div>


        <btn></btn>
        <btn></btn>
        <btn></btn>
    </div>
</body>
<script>
    // 全局注册组件
    Vue.component("myhead", {
        template: "<header> head - head - wh2110 - daydayup </header>"
    })
    Vue.component("myfoot", {
        template: "<h2>Foot - Foot - Wh2110</h2>"
    })
    Vue.component("odiv", {
        template: "<h3>组件名称不能和标签名称一样</h3>"
    })
    Vue.component("mainBox", {
        template: " <div><h1> mainBox - mainBox - 主视图 </h1><h1> Layout  - Layout - 主视图 </h1>  </div>"
    })



    var test = {
        template: "<h1>Test - Test - Test </h1>"
    }
    Vue.component("Test", test)

    // 组件选项对象
    const menu = Vue.extend({
        template: "<h2>menu - menu - menu </h2>",
        methods: {},
        mounted() { },
        filters: {},
        components: {},
        directives: {}
    })
    new menu().$mount("#menu")
    // Vue.component("myMenyu", menu)

    Vue.component("btn", {
        template: "<button @click='change'> {{count}} </button>",
        data() {     // 为什么 组件 data 必须是一个函数 而且必须有返回值
            return {
                count: 1
            }
        },
        mounted() { },
        created() { },
        filters: {},
        directives: {},
        components: {},
        watch: {},
        computed: {},
        methods: {
            change() {
                this.count++
            }
        }

    })
    // 根实例 
    const vm = new Vue({
        // 局部注册组件
        components: {
            myBox: {
                template: "<h4>MyBox - MyBox - Mybox </h4>"
            }
        },
        data: {
            title: "Vue 组件创建 ",
        },
        mounted() {
            document.getElementsByTagName("title")[0].innerHTML = this.title;
        }
    }).$mount("#app")
</script>
<!--

    Vue 组件 代码复用和抽象的主要形式是组件  封装代码
    组件当做小型的 单元实例对象 带有一个名称（小巧 独立 可复用）

    必须包含一段 html标签的 代码块 （css样式 javascript 代码）
    显示页面
    展示数据
    修改数据

    组件当小型的 vm 实例对象（组件系统 vue 核心）
    Vue.component(name,options) 全局注册    name 组件名称   options 组件选项参数
    components 局部注册

    组件名称规则
    组件名  不能跟html标签一致
    mHead   遵循驼峰名 M-head （HTML 不遵循驼峰命名）
    组件首字母 可以大写（单元件组件 JS文件）
    组件的模板 只能包含一个根元素 顶层标签
    组件书写可以使用单标签

    扩展
    $.extends  $ 静态对象   静态对象扩展 $.get $.post $.ajax
    $.fn.extends    $.fn    $.prototype 原型对象    原型对象扩展 $("#id").show().hide()

    Vue.extend  使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项（el data computed mounted filters components directives）的对象
    extend
    class a extends Vue  ==> 创建子类

    组件的选项参数 包含 之间你在实例写的任何属性
    data除外 在组件里面data 属性必须是一个函数  必须有返回值 必须返回一个对象
 -->

</html>